import React, { useEffect, useImperativeHandle, useRef } from 'react'
import IconRight from './icon-right.png'
import { SIZE } from './enum'
import './index.less'

interface IProps {
  min?: number
  max?: number
  value: number
  title?: string
  desc?: string
  size?: string
  unit?: string
  showSplit?: boolean
  onOpen?: () => void
}

const SPLITCS_CONFIG = [
  { color: 'rgba(255, 100, 100, 1)', rotate: -45 },
  { color: 'rgba(244, 229, 83, 1)', rotate: 0 },
  { color: 'rgba(83, 234, 178, 1)', rotate: 45 }
]

const BASIC_AXISTICK_ROTATE = -135
const BASIC_POINTER_ROTATE = -90

const GaugeChart: React.FC<IProps> = ({
  min = 0,
  max = 100,
  title = '',
  value = 0,
  desc = '',
  unit = '',
  showSplit = true,
  size = SIZE.middle,
  onOpen
}) => {
  // 分割线间距
  const splitNumber = Math.floor((max - min) / 4)

  // 刻度与值的换算
  const rotateValue = 180 / (max - min)

  return (
    <div className={'charts-gauge charts-gauge-' + size}>
      <div className="charts-gauge-position">
        <div className="charts-gauge-align-content">
          <div className="charts-gauge-axisLine">
            {/* 刻度 */}
            {true && (
              <div
                className="charts-gauge-axisTick"
                style={{ transform: `rotate(${BASIC_AXISTICK_ROTATE + rotateValue * value}deg)` }}
              />
            )}
            {/* 分割线 */}
            {showSplit && (
              <div className="charts-gauge-splits-wrap">
                <div className="charts-gauge-splits">
                  {SPLITCS_CONFIG.map((item, index) => {
                    return (
                      <div
                        className="gauge-split"
                        key={index}
                        style={{ transform: `rotate(${item.rotate}deg)` }}
                      >
                        <div className="gauge-split-bg" style={{ background: item.color }} />
                        <div style={{ color: item.color }}>{splitNumber * (index + 1)}</div>
                      </div>
                    )
                  })}
                </div>
              </div>
            )}
            {/* 指针 */}
            <div
              className="charts-gauge-pointer-wrap"
              style={{ transform: `rotate(${BASIC_POINTER_ROTATE + rotateValue * value}deg)` }}
            >
              <div className="charts-gauge-pointer-border">
                <div className="charts-gauge-pointer" />
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* 起始数值 */}
      <div className="charts-gauge-extra-label">
        <span>{min + unit}</span>
        <span>{max + unit}</span>
      </div>
      <div className="charts-gauge-content">
        <div className="charts-gauge-content-title">{value + unit}</div>
        <div className="charts-gauge-content-desc">
          <div className="desc-title">{title}</div>
          {onOpen ? <img src={IconRight} alt="" onClick={onOpen} /> : null}
        </div>
      </div>
      {desc && (
        <div className="charts-gauge-desc-content">
          <span>{desc}</span>
        </div>
      )}
    </div>
  )
}

export default GaugeChart
